<template>
    <div class="noticeContainer">
        <div class="myNoticeContent">
            <div class="back" @click="goBack"></div>
            <p class="title">系统通知</p>
            <div class="setting" @click="gotoSetting"></div>
        </div>
        <div class="allNotice">
            <ul class="notices">
                <li v-for="notice in notices" :key="notice.id">
                    <p class="noticeTime">{{ notice.canlendar }} {{ notice.time }}</p>
                    <div class="notice">
                        <div class="noticeImg"></div>
                        <div class="noticeContent">
                            <p class="noticeSay">{{ notice.say }}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'myNotice',
        data(){
            return{
                notices:[
                    {id:0,canlendar:'01-03',time:'23:14',say:'你好，本次多囊患者问卷调查活动结束啦！感谢你的支持！'},
                    {id:1,canlendar:'01-04',time:'23:14',say:'你好，本次多囊患者问卷调查活动结束啦！感谢你的支持！'},
                ]
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            gotoSetting(){
                this.$router.push({
                    name:'messageSetting'
                })
            }
        }
    }
</script>

<style scoped>
    .noticeContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .myNoticeContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        margin-right: .16rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .setting{
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/7-icon@2x/7-3setting.png);
        width: .48rem;
        height: .48rem;
    }
    .allNotice{
        margin-top: 1.76rem;
        width: 100%;
    }
    .notices{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    .notices li{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .notice{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: .48rem;
    }
    .noticeTime{
        font-family: 'PingFangSC-Regular';
        color:#999999;
        font-size: .24rem;
        margin-bottom: .2rem;
    }
    .noticeImg{
        border-radius: 50%;
        width: .88rem;
        height: .88rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/7-icon@2x/7-5systemHead.png);
    }
    .noticeContent{
        margin-left: .2rem;
        background-color: #FFF;
        border-radius: .3rem;
        font-family: 'PingFangSC-Regular';
        color:#333333;
        font-size: .28rem;
        width: 250px;
    }
    .noticeSay{
        width: 85%;
        margin: .3rem auto;
    }
</style>